<template>
	<view>
		<view class="grace-editor">
			<view class="title"><text>{{articleInfo.title}}</text></view>
			<view class="content">
				<block v-for="(item, index) in articleInfo.content" :key="index">
					<view v-if="item.type == 'txt'" class="item"><text>{{item.content}}</text></view>
					<view class="item grace-flex grace-flex-center" v-if="item.type == 'center'">
						<view class="center-title">{{item.content}}</view>
					</view>
					<view class="imgs" v-if="item.type == 'img'">
						<image :src="item.content" :data-url="item.content" @tap="showImgs" mode="widthFix"></image>
					</view>
					<view class="item" v-if="item.type == 'quote'">
						<view class="quote"><text>{{item.content}}</text></view> 
					</view>
					<view class="item" v-if="item.type == 'strong'" style="margin-top:8px;">
						<text class="strong">{{item.content}}</text>
					</view>
					<view class="item" v-if="item.type == 'link'">
						<graceLink :url="item.content" :title="item.content"></graceLink>
					</view>
					<view class="item spline" v-if="item.type == 'spline'">● ● ●</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
import graceLink from "../../graceUI/components/graceLink.vue";
export default {
	data() {
		return {
			articleInfo : []
		}
	},
	onLoad : function(){
		uni.request({
			url:"https://www.easy-mock.com/mock/5cb9655c01e2e57715d324b0/example/editerDemo#!method=get",
			success: (res) => {
				console.log(res);
				this.articleInfo = res.data;
			}
		})
	},
	methods: {
		showImgs:function(e){
			var currentUrl = e.currentTarget.dataset.url;
			var imgs       = [];
			var items      = this.articleInfo.content;
			for(let i = 0; i < items.length; i++){
				if(items[i].type ==  'img'){
					imgs.push(items[i].content);
				}
			}
			console.log(imgs);
			uni.previewImage({
				urls:imgs,
				current:currentUrl
			})
		}
	},
	components:{
		graceLink:graceLink
	}
}
</script>
<style>
</style>